import React, { useMemo } from 'react';
import { marked, Tokens } from 'marked';
// import hljs from 'highlight.js';
// import javascript from 'highlight.js/lib/languages/javascript';
// import typescript from 'highlight.js/lib/languages/typescript';

// hljs.registerLanguage('javascript', javascript);
// hljs.registerLanguage('typescript', typescript);
import 'highlight.js/styles/github.css';
import '@/assets/css/markdown.css';

const renderer = new marked.Renderer();

// renderer.code = ({ text, lang, escaped }: Tokens.Code) => {
//   if (lang) {
//     const language = hljs.getLanguage(lang) ? lang : 'plaintext';
//     return `<pre><code class="hljs language-${language}">${hljs.highlight(text, { language }).value}</code></pre>`;
//   } else {
//     return text;
//   }
// };

marked.use({ renderer });

// 类型定义
interface MarkdownRendererProps {
  content?: string;
  className?: string;
}

const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({ content = '', className = '' }) => {
  const [html, setHtml] = useState('');

  useEffect(() => {
    async function render() {
      const renderedHtml = await marked(content);
      setHtml(renderedHtml);
    }
    render();
  }, [content]);

  return (
    <div className={`markdown-container ${className}`} dangerouslySetInnerHTML={{ __html: html }} />
  );
};

export default MarkdownRenderer;
